<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>2.滚动监听</title>

<!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

	<link href="../css/bootstrap.css" rel="stylesheet" type="text/css">
	<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap.js"></script>

<style type="text/css">
	body {
		padding-top:60px;
	}
</style>

	<script type="text/javascript">

		$(document).ready(function(e) {
			//滚动监听事件处理
			$('#navbar-example').on('activate.bs.scrollspy',function(e){
				var currentItem = $('#navbar-example li.active a').text();
				document.title = currentItem;
			});
		});

	</script>
</head>

<body data-spy="scroll" data-target="#navbar-example" data-offset="60">

<div class="container">

	<!--导航条-->
	<nav id="navbar-example" class="navbar navbar-default navbar-fixed-top" role="navigation">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myCollapse">
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a href="#" class="navbar-brand">滚动监听</a>
		</div>
		<div id="myCollapse" class="collapse navbar-collapse">
			<ul class="nav navbar-nav">
				<li class="active">
					<a href="#java">JAVA</a>
				</li>
				<li>
					<a href="#oracle">ORACLE</a>
				</li>
				<li>
					<a href="#html">HTML</a>
				</li>
				<li>
					<a href="#css">CSS</a>
				</li>
			</ul>
		</div>
	</nav>


	<!--监听的内容区域-->
	<div>
		<h2 id="java">JAVA</h2>
		<script type="text/javascript">
			for (var i = 1;i <= 50;i++) {
				document.write(i + 'java<br>');
			}
		</script>

		<h2 id="oracle">ORACLE</h2>
		<script type="text/javascript">
			for (var i = 1;i <= 50;i++) {
				document.write(i + 'oracle<br>');
			}
		</script>

		<h2 id="html">HTML</h2>
		<script type="text/javascript">
			for (var i = 1;i <= 50;i++) {
				document.write(i + 'html<br>');
			}
		</script>

		<h2 id="css">CSS</h2>
		<script type="text/javascript">
			for (var i = 1;i <= 50;i++) {
				document.write(i + 'css<br>');
			}
		</script>
	</div>
</div>

</body>

</html>